<template>
    <div ref="box">
        <ul>
            <draggable @end="end" @start="move" v-model="nodes" :options="draggableOptions">
                <li v-for="node in nodes" :key="node.id" :type="node.type" :class="itemClass(node.type)">
                    <i :class="node.icon"></i> {{ node.name }}
                </li>
            </draggable>
        </ul>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import draggable from 'vuedraggable';

var mousePosition = {
    left: -1,
    top: -1,
};
@Component({
    components: {
        draggable,
    },
})
export default class NodeBox extends AbpBase {
    name: string = 'NodeBox';

    draggableOptions = {
        preventOnFilter: false,
        sort: false,
        disabled: false,
        ghostClass: 'tt',
        forceFallback: true,

    };
    nodes = [
        {
            id: 'start',
            name: '开始',
            type: 'start',
            typeName: '开始',
            icon: 'fa fa-play',
        }, {
            id: 'task',
            name: '任务',
            type: 'task',
            typeName: '任务',
            icon: 'fa fa-user',
        }, {
            id: 'end',
            name: '结束',
            type: 'end',
            typeName: '结束',
            icon: 'fa fa-stop',
        },

    ];
    boxNode = {};

    move(event) {
        const type = event.item.attributes.type.nodeValue;
        this.boxNode = this.getNodeByType(type);
    }

    end(event) {
        this.$emit('addNode', event, this.boxNode, mousePosition);
    }


    getNodeByType(type) {
        for (const node of this.nodes) {
            if (node.type === type) {
                return node;
            }
        }
    }

    isFirefox() {
        const userAgent = navigator.userAgent;
        return userAgent.indexOf('Firefox') > -1;
    }

    itemClass(type: string) {
        return {
            task: type === 'task',
            start: type === 'start',
            end: type === 'end',
        };
    }


    created() {
        if (this.isFirefox()) {
            document.body.ondrop = (event) => {
                mousePosition.left = event.layerX;
                mousePosition.top = event.clientY - 50;
                event.preventDefault();
                event.stopPropagation();
            };
        }
    }
}
</script>

<style lang="less" scoped>

ul {
    list-style: none;

    li {
        float: left;
        color: #ffffff;
        border: 1px solid #dcdee2;
        margin-right: 6px;
        padding: 5px;
        text-align: center;
        border-radius: 4px;

        &.task {
            background-color: #ff66ff;
        }

        &.start {
            background-color: #2d8cf0;
        }

        &.end {
            background-color: #808695;
        }
        &:hover {
            cursor: move;
            border: 1px dashed #808695;
        }
    }
}
</style>
